package com.huluobo.a2303mdmdemo.demo

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshots.SnapshotStateList
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp

/**
 *  Created by LC on 2025/8/15.
 */

@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
@Composable
fun MyFlowRow() {
    //搜索记录的数据源
    val list = remember {
        //带状态的集合,当集合中的内容发生改变的时候,比如增加或者减少,使用它的列表会跟随改变,不需要刷新适配器
        SnapshotStateList<String>()
    }

    //搜索记录
    var key by remember {
        mutableStateOf("")
    }

    Column(modifier = Modifier.fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(10.dp)) {
        OutlinedTextField(value = key, onValueChange = { key = it }, modifier = Modifier
            .fillMaxWidth()
            .padding(5.dp), trailingIcon = {
            Icon(imageVector = Icons.Default.Search, contentDescription = "", modifier = Modifier.clickable {
                if (key.isNotEmpty()) {
                    //如果搜索记录不为空,添加到数据源
                    list.add(key)
                    //清空搜索框
                    key = ""
                }
            })
        })

        FlowRow(
            modifier = Modifier.padding(10.dp),
            horizontalArrangement = Arrangement.spacedBy(10.dp),
            verticalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            list.forEach {
                //如果最后一个参数是个方法的话,可以把大括号放在外面
                FlowItem(text = it) {
                    //单击下方item中的文本的时候,可以回调在当前位置
                    key = it
                }

                //如果不适用item控件的形式,可以直接在当前位置写出布局
//                Text(
//                    text = it, modifier = Modifier
//                        .background(Color.Yellow, RoundedCornerShape(20.dp))
//                        .border(
//                            1.dp, Color.Gray,
//                            RoundedCornerShape(20.dp)
//                        )
//                        .padding(10.dp, 5.dp)
//                        .clickable {
//                            key = it
//                        }, maxLines = 1, overflow = TextOverflow.Ellipsis
//                )
            }
        }
    }
}

//() -> Unit 代表当前参数是个方法  () 代表方法 , -> 代表当前方法返回值 Unit 代表没有返回值,类似Java中的void
@Composable
fun FlowItem(text: String, onClick: () -> Unit) {
    Text(
        text = text, modifier = Modifier
            .background(Color.Yellow, RoundedCornerShape(20.dp))
            .border(
                1.dp, Color.Gray,
                RoundedCornerShape(20.dp)
            )
            .padding(10.dp, 5.dp)
            .clickable {
                onClick()
            }, maxLines = 1, overflow = TextOverflow.Ellipsis
    )
}